<template>
    <a-dropdown placement="bottom" arrow :trigger="['hover']">
        <div class="factory-select">
            <a-button type="text">{{selectedValue}}</a-button>
            <DownOutlined />
        </div>
        <template #overlay>
            <a-menu>
                <a-menu-item v-for="(option, index) in  options" :key="index" @click="handleClick(option, index)" :class="menuItemClass(option)">
                    {{option.value}}
                </a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
</template>
<script lang="ts" setup>
    import { ref, computed, defineModel } from 'vue';
    import { BankOutlined, DownOutlined } from '@ant-design/icons-vue';

    defineOptions({
        name: 'dcc-factory-select'
    });
    const props = defineProps({
        options: {
            type: Array<any>,
            default: () => {
                return [];
            }
        }
    });

    const model: any = defineModel<string|undefined>('value');

    const selectedValue = computed(() => {
        const target = props?.options.find(option => option.key === model.value);
        return target?.value;
    });

    const menuItemClass = computed(() => {
        return (option) => {
            if (option.key === model.value) return ['selected-option'];
        }
    });

    function handleClick(option, index) {
        model.value = option.key;
    }

    function initModel() {
        if (!model.value){
            model.value = props?.options[0].key;
        }
    }
    initModel();
</script>
<style lang="less" scoped>
    .factory-select{
        width: fit-content;
        min-width: 60px;
    }
    :deep(.ant-dropdown .ant-dropdown-menu) {
        .selected-option {
            color: #006be6;
            background-color: #e6f6ff;
        }
    }
</style>